<template>
  <detail-dialog
    :title="title"
    :show.sync="showDialog"
    :width="70" modal
    :top="2"
    @save="save('supplierForm')"
  >
    <el-form
      :model="formData"
      label-position="right"
      label-width="100px"
      ref="supplierForm"
      :rules="rules"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="供应商名称" prop="supplierName">
            <el-input
              v-model="formData.supplierName"
              class="wp-form-280"
              placeholder="供应商名称"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="级别" prop="level">
            <el-select
              v-model="formData.level"
              class="wp-form-280"
              placeholder="供应商级别"
              clearable
            >
              <el-option
                v-for="item in supplierLevels"
                :key="item"
                :value="item"
                :label="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="联系人姓名" prop="contactsName">
            <el-input
              class="wp-form-280"
              v-model="formData.contactsName"
              placeholder="联系人姓名"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系人手机号" prop="contactsMobile">
            <el-input
              v-model="formData.contactsMobile"
              class="wp-form-280"
              placeholder="联系人手机号"
              maxlength="11"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="省/市/区">
            <Region-cascader
             customClass="wp-form-280"
            :province.sync="formData.province"
            :provinceCode.sync="formData.provinceCode"
            :city.sync="formData.city"
            :cityCode.sync="formData.cityCode"
            :area.sync="formData.area"
            :areaCode.sync="formData.areaCode"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
           <el-form-item label="联系邮箱" prop="email">
            <el-input
              class="wp-form-280"
              v-model="formData.email"
              placeholder="联系邮箱"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="详细地址" prop="address">
            <el-input
              class="wp-form-280 address"
              v-model="formData.address"
              placeholder="详细地址"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
         <el-form-item label="负责人" prop="chargePerson">
           <Employee-seach :employeeCode.sync="formData.chargePerson" :employeeName.sync="formData.chargePersonName"/>
          </el-form-item>
        </el-col>

      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="备注" prop="remark">
            <el-input
              type="textarea"
              class="wp-form-280"
              v-model="formData.remark"
              placeholder="备注"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </detail-dialog>
</template>
<script>
import {mapGetters} from 'vuex'
import DetailDialog from '@/components/DetailDialog'
import RegionCascader from '@/components/RegionCascader'
import EmployeeSeach from '@/views/components/EmployeeSeach'
import Mixins from '../mixins'

export default {
  components: {DetailDialog, RegionCascader, EmployeeSeach},
  mixins: [Mixins],
  data () {
    return {
      id: 'supplier_detail',
      showDialog: false,
      title: '',
      formData: {
        abcAddress: [3, 3, 1]
      },
      rules: {
        supplierName: [{required: true, message: '不能为空', trigger: 'blur'}],
        level: [{required: true, message: '不能为空', trigger: 'blur'}]
      }
    }
  },
  mounted () {
    this.handleEmployeeQuery()
  },
  computed: {
    ...mapGetters(['supplierLevels'])
  },
  methods: {
    show (title, data) {
      this.title = title
      this.showDialog = true
      this.formData = data || {}
    },
    close () {
      this.showDialog = false
    },
    save (formName) {
      if (this.checkFormData(formName)) {
        const request = this.formData && this.formData.id !== undefined && this.formData.id !== null ? 'updateSupplier' : 'addSupplier'
        if (request === 'updateSupplier') {
          this.formData.creator = null
          this.formData.createTime = null
          this.formData.updateTime = null
        }
        this.requestOption(request, this.formData, (res) => {
          this.close()
          this.$parent.initPageList()
        })
      }
    }
  }
}
</script>
